<style>
* {
    margin: 0;
    padding: 0;
}

.container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('@/assets/1.png') no-repeat;
    background-size: cover;
}

.container-box {
    width: 300px;
    height: 300px;
    padding: 50px;
    position: absolute;
}

.input {
    position: absolute;
    top: 180px;
    left: 50%;
    transform: translateX(-50%)
}

.btn {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
}
</style>

<template>
    <div class="container">
        <div class="container-box">
            <div class="input">
                <el-form :model="form" label-width="auto" style="max-width: 600px">
                    <el-form-item label="账号">
                        <el-input v-model="form.sno" />
                    </el-form-item>

                    <el-form-item label="密码">
                        <el-input v-model="form.password" show-password />
                    </el-form-item>
                </el-form>
            </div>
            <div class="btn">
                <el-button type="primary" @click="login()">登录</el-button>
                <el-button type="primary">注册</el-button>
            </div>
        </div>
    </div>
</template>

<script lang="js" setup name="Login">
import { reactive } from 'vue'
import service from '@/utils/request';
import { useRouter } from 'vue-router'

const router = useRouter()

const form = reactive({
    sno: '201804006',
    password: '123456'
})

const login = () => {
    dataCheck();
    if (!flig) {
        return;
    }
    service({
        url: 'auth/login',
        method: 'post',
        data: {
            sno: form.sno,
            password: form.password
        }
    }).then(res => {
        if (res.status === 200) {
            ElMessage({
                message: '登录成功！',
                type: 'success',
            });
            window.localStorage.setItem('token', res.data);
            setTimeout(() => {
                window.localStorage.removeItem('token');
                console.log('一天后删除token')
            }, 86400000);
            // 一天后删除token
            router.push('/home')
        }
    })
}

var flig = true;
const dataCheck = () => {
    if (form.sno.trim() === '' || form.password.trim() === '') {
        ElMessage.error('请输入账号密码')
        flig = false;
        return;
    }
    if (form.sno.trim().length < 6 || form.sno.trim().length > 9) {
        ElMessage.error('账号格式错误,账号长度为 6~9位')
        flig = false;
        return;
    }
    if (form.password.trim().length < 6 || form.password.trim().length > 10) {
        ElMessage.error('密码格式错误,密码长度为 6~10位')
        flig = false;
        return;
    }
    if (!/^\d+$/.test(form.sno.trim())) {
        ElMessage.error('账号格式错误,账号为纯数字')
        flig = false;
        return;
    }
    flig = true;
}
</script>